﻿<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="home/commons/include :: common_header('酒店预定')" />
    <link rel="stylesheet" th:href="@{/index/layui/css/layui.css}" />
    <script th:src="@{/index/layui/layui.all.js}"></script>
    <script th:src="@{/index/layui/layui.js}"></script>
</head>


<style>

    @media (max-width: 1024px) {
        .banner-n { margin-top: 60px; }
    }
    .room .rm_xq .list li:nth-child(3n+1) { clear: both; }
    .pages { margin-top: 50px; text-align: center; clear: both; }
    .pages ul li { display: inline-block; }
    .pages span { padding: 10px 15px; border: solid #e6e6e6 1px; font-size: 14px; }
    .pages a { padding: 10px 15px; border: solid #e6e6e6 1px; font-size: 14px; }
    .pages span:hover { background: #90704D; color: #fff; }
    .pages a:hover { background: #90704D; color: #fff; }
    /*.pages .on { background: #90704D; color: #fff; }*/
    .room .list_a li:hover a { border-bottom: solid #90704D 2px; color: #90704D; }
    .room .list_a li a.Select { border-bottom: solid #90704D 2px; color: #90704D; }
    @media (max-width: 1024px) {
        .room .rm_xq .list li:nth-child(3n+1) { clear: none; }
        .room .rm_xq .list li:nth-child(2n+1) { clear: both; }
    }

    .rm_ct
    {
        width: 360px;
        height: 240px;
    }


    .content
    {
        width: 690px;
        margin: 15px auto;
    }

    /*日期选择器去除秒**/
    .layui-laydate-content>.layui-laydate-list {
        padding-bottom: 0px;
        overflow: hidden;
    }

    .layui-laydate-content>.layui-laydate-list>li{
        width:50%
    }

    .merge-box .scrollbox .merge-list {
        padding-bottom: 5px;
    }
</style>

<body>
    <th:block th:include="home/commons/include :: index-header(-1)"/>

    <div class="banner-n clearfix">
        <div class="frame" style="background: url(/index/images/timg1.jpg) no-repeat center center;
        background-size:cover; width:100%;"></div>
    </div>

    <div class="wy_dw">
        <div class="dw g_cw">
            <p>
                <img class="" th:src="@{/index/images/dw_nei.png}">
                <a th:href="@{/home/index/index}">网站首页</a><span> &nbsp >> &nbsp
                </span><a th:href="@{/home/index/room}">酒店房间</a>
            </p>
        </div>
    </div>

    <div class="content">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">房型:</label>
                <div class="layui-input-block">
                    <input class="layui-input layui-disabled" th:value="${room.roomType.type}" disabled/>
                </div>
            </div>
        </div>
        <input class="layui-input" id="number" value="1" min="1" type="hidden" />
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">日期:</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="test-limit2" readonly="" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">时间:</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" id="test-time" placeholder="H点">
                </div>
            </div>
        </div>
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">价格:</label>
                <div class="layui-input-block" style="line-height: 36px">
                    [[${room.price}]]/小时  <font style="color: red;">注意:日期"被定"是已经被人预定的房间</font>
                </div>
            </div>
        </div>
        <div class="layui-form" style="text-align: right;">
            <input type="button" class="layui-btn" value="提交" onclick="M.save()"/>
        </div>
    </div>
    <th:block th:include="home/commons/include :: index-foot" />


    <script th:inline="javascript">
        var M = {};
        M.date = "";
        M.startTime = "";
        M.endTime = "";

        M.id = [[${room.id}]];
        M.falg = true;

        layui.use("laydate",function()
        {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#test-time'
                ,type: 'time'
                ,range: true
                ,format:"HH"
                ,done: function(value, time, time2){
                    M.startTime = time.hours.toString();
                    M.endTime = time2.hours.toString();

                    if(time.hours == null)
                    {
                        M.falg = false;
                    }
                    else
                    {
                        M.falg = true;
                    }
                }
            })


            laydate.render({
                elem: '#test-limit2'
                ,isInitValue: true,
                trigger: 'click'
                ,type: 'date',
                min:0,
                max:30,
                mark:{
                    [# th:each="date : ${listdate}"]
                        [[${date}]]:"被定",
                    [/]
                },
                done: function(value, date){
                    M.date = date.year + "-" + date.month + "-" + date.date;
                }
            });


        });

        M.save = function()
        {
            if(M.startTime == "")
            {
                layer.msg("请选择时间");
                return ;
            }

            if(M.endTime == "")
            {
                layer.msg("请选择时间");
                return ;
            }

            if(!M.falg)
            {
                layer.msg("请选择时间");
                return ;
            }

            if(M.date == "")
            {
                layer.msg("请选择日期");
                return ;
            }

            var number = $("#number").val();
            if(number == "")
            {
                layer.msg("请输入入住人数");
                return ;
            }

            if(M.startTime == M.endTime)
            {
                layer.msg("订房时间和退房不能是同一个小时");
                return ;
            }

            $.ajax({
                url:"/home/index/room_reserve_timelimit_add",
                type:'POST',
                data:{startTime:M.startTime,endTime:M.endTime,id:M.id,number:number,date:M.date},
                dataType:'json',
                success:function(data){
                    if(data.code == 0){
                        layer.msg("预定成功!");
                        location.href = "/home/index/room";
                    }else{
                        layer.msg(data.msg);
                    }
                },
                error:function(data){
                    layer.msg("网络错误")
                }
            });
        }
    </script>
</body>
</html>

